<!-- todo的每一项 -->
<template>
  <div class="todo-item">
    <ul class="todo-list">
      <li class="todo">
        <div class="view">
          <span class="toggle">
            <input v-model="item.complete" type="checkbox" class="toggle" />
          </span>
          <label :class="{delItem:item.complete}">{{ item.text }}</label>
          <button class="destroy" @click="handleItemDel">×</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  props: {
    item: {
      type: Object,
      default: {},
    },
    index:{
        type:Number,
        default:0
    }
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
      handleItemDel:function(){
          console.log('删除todo',this.index);
          this.$emit('deltodo',this.index);
      }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
li {
  list-style: none;
}
.todo-list {
  width: 650px;
  margin: 0 auto;
  background: #fff;
}
.todo-list li {
  position: relative;
  padding: 10px 20px;
  font-size: 24px;
  background: #fff;
  border-bottom: 1px solid #ededed;
}

.todo-list li .toggle {
  /* -webkit-appearance: none; */
  display: table-cell;
  vertical-align: middle;
  margin: 0 10px;
  width: 22px;
  height: 22px;
}

.todo-list li label {
  width: 400px;
  padding-left: 10px;
  line-height: 30px;
  display: table-cell;
  word-break: break-all;
  white-space: normal;
  box-sizing: border-box;
  color: #4d4d4d;
  vertical-align: middle;
}

.todo-list li .destroy {
  visibility: hidden;
  position: absolute;
  display: table-cell;
  vertical-align: middle;
  outline: none;
  right: 20px;
  top: calc(50% - 15px);
  background: #fff;
  color: #cc9a9a;
  border: none;
  width: 30px;
  height: 30px;
  font-size: 30px;
}
.todo-list li:hover .destroy {
    visibility: visible;
}
.todo-list li .delItem{
  color: #ccc;
  text-decoration: line-through;
}
</style>